<!-- Welcome.vue -->
<template>
  <div class="chat-container">
    <div class="welcome-section">
      <div class="avatar-container">
        <img src="@/assets/logo.png" alt="Sage Logo" class="avatar-logo"/>
      </div>
      <h1 class="welcome-title">我是 Sage，很高兴见到你！</h1>
      <p class="welcome-desc">我可以帮你写代码、读文件、写作各种创意内容，请把你的任务交给我吧~</p>
      <div class="input-wrapper">
        <textarea
            class="chat-input"
            placeholder="给 Sage 发送消息"
            v-model="inputMessage"
            @keydown.enter.prevent="sendMessage"
            @input="adjustInputHeight"
            ref="inputRef"
            :disabled="isSending"
        ></textarea>
        <div class="tool-buttons">
          <div class="left-tools">
            <!-- 深度思考按钮 -->
            <button class="tool-btn deep-think" :disabled="isSending">
              <span class="icon-deep-think"></span>
              深度思考
            </button>

            <!-- 联网搜索按钮 -->
            <button class="tool-btn web-search" :disabled="isSending">
              <span class="icon-globe"></span>
              联网搜索
            </button>
          </div>

          <div class="right-tools">
            <!-- 上传文件按钮 -->
            <button class="tool-btn upload" :disabled="isSending">
              <span class="icon-upload"></span>
            </button>
            <!-- 发送按钮 -->
            <button
                class="tool-btn send"
                :disabled="!inputMessage.trim() || isSending"
                @click="sendMessage">
              <span v-if="!isSending" class="icon-send"></span>
              <span v-else class="loading-icon"></span>
            </button>
          </div>
        </div>
      </div>

      <!-- 添加全局加载遮罩 -->
      <div v-if="isSending" class="loading-indicator">
        <div class="loading-spinner-small"></div>
        <div class="loading-text-small">创建中...</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';

const props = defineProps({
  inputValue: {
    type: String,
    default: ''
  },
  isSending: {  // 添加这个props，从父组件接收发送状态
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['send']);

const inputMessage = ref(props.inputValue);
const inputRef = ref(null);

// 自动调整输入框高度
const adjustInputHeight = () => {
  if (!inputRef.value) return;

  // 重置高度，以便正确计算
  inputRef.value.style.height = 'auto';

  // 设置新高度 (scrollHeight 是内容的实际高度)
  const newHeight = Math.min(inputRef.value.scrollHeight, 200); // 最大高度限制为200px
  inputRef.value.style.height = `${newHeight}px`;
};
// 监听输入消息变化，调整高度
watch(inputMessage, () => {
  nextTick(() => {
    adjustInputHeight();
  });
});

// 聚焦输入框
onMounted(() => {
  nextTick(() => {
    if (inputRef.value) {
      inputRef.value.focus();
      adjustInputHeight(); // 初始化时调整一次高度
    }
  });
});


// 聚焦输入框
onMounted(() => {
  nextTick(() => {
    if (inputRef.value) {
      inputRef.value.focus();
    }
  });
});

// 发送消息
const sendMessage = async () => {
  if (!inputMessage.value.trim() || props.isSending) return;

  try {
    emit('send', inputMessage.value);
    // 不在这里清空输入框，等待真正发送成功后由父组件控制清空
  } catch (error) {
    console.error('发送消息失败:', error);
  }
};
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #2a3547;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.welcome-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  background-image: linear-gradient(180deg, #f0f5ff 0%, #e5eeff 100%);
}

.avatar-container {
  //margin-bottom: 5px;
  background: rgba(44, 86, 160, 0.08);
  padding: 12px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(44, 86, 160, 0.1);
}

.avatar-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.welcome-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #2c56a0;
  letter-spacing: -0.5px;
}

.welcome-desc {
  font-size: 16px;
  color: #5a6a85;
  max-width: 600px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.input-wrapper {
  background-color: #ffffff;
  padding: 18px;
  width: 680px;
  margin: 0 auto;
  border-radius: 25px;
  box-shadow: 0 4px 20px rgba(44, 86, 160, 0.08);
  border: 1px solid rgba(44, 86, 160, 0.12);
  transition: all 0.3s ease;
}

.input-wrapper:hover {
  box-shadow: 0 6px 25px rgba(44, 86, 160, 0.12);
}

.chat-input {
  width: 100%;
  min-height: 30px;
  max-height: 200px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: #2a3547;
  font-size: 16px;
  outline: none;
  resize: none;
  line-height: 1.5;
  border-radius: 24px;
  overflow-y: hidden; /* 隐藏垂直滚动条 */
  transition: height 0.2s; /* 高度变化过渡效果 */

  /* 隐藏滚动条 - 各浏览器兼容 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

/* Webkit 浏览器（Chrome、Safari等）隐藏滚动条 */
.chat-input::-webkit-scrollbar {
  display: none;
}

.chat-input::placeholder {
  color: #bbc0ca;
}

.tool-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1px;
  border-top: 1px solid rgba(44, 86, 160, 0.08);
}

.left-tools, .right-tools {
  display: flex;
  gap: 12px;
  align-items: center;
}

.tool-btn {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: #5a6a85;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tool-btn:hover {
  background-color: rgba(44, 86, 160, 0.05);
  transform: translateY(-1px);
}

.tool-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tool-btn:disabled:hover {
  background-color: transparent;
  transform: none;
}

.deep-think {
  border: 1px solid rgba(44, 86, 160, 0.18);
  background-color: transparent;
  color: #5a6a85;
}

.deep-think:hover {
  background-color: rgba(44, 86, 160, 0.05);
}

.web-search {
  border: 1px solid rgba(44, 86, 160, 0.18);
}

.icon-deep-think, .icon-globe, .icon-upload, .icon-send {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.icon-deep-think {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%235a6a85"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>');
}

.icon-globe {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%235a6a85"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>');
}

.icon-upload {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%235a6a85"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>');
}

.icon-send {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232c56a0"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>');
  transform: rotate(-45deg);
}

/* 替换原有的loading-overlay相关样式 */
.loading-indicator {
  position: absolute;
  right: 20px;
  top: -45px;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 6px 15px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(44, 86, 160, 0.15);
  z-index: 100;
}

.loading-spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(44, 86, 160, 0.2);
  border-radius: 50%;
  border-top: 2px solid #2c56a0;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

.loading-text-small {
  color: #2c56a0;
  font-size: 14px;
}

/* 保留原有的spin动画 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border: 2px solid transparent;
  border-radius: 50%;
  border-top: 2px solid #2c56a0;
  animation: spin 1s linear infinite;
}

</style>